<template>
	<view class="index-top-box iconfont">
		<view class="index-top wrap">
			<view class="index-icon color">
				&#xe608;
			</view>
			<view class="index-title">

			</view>
			<view class="index-intro">
				58官方自营 · 平台监管 · 随叫随到
			</view>
		</view>
		<view class="index-address index-top wrap">
			<view class="flex">
				<view class="add-icon">
					&#xe62b;
				</view>
				<view class="flex adress-box">
					<view class="address-title">
						成都高新孵化园
					</view>
					<view class="address-icon">
						&#xe6a4;
					</view>
				</view>
			</view>
			<view class="index-ticket">
				&#xe86a;
			</view>
		</view>
		<view class=" wrap classify">
			<view class="daily  mod" @click="dayClick">
				<view class="classify-title">
					日常保洁
				</view>
				<view class="classify-intro intro-daily">
					36元/小时起
				</view>
				<view class="classify-img">

				</view>
			</view>
			<view class="deep mod">
				<view class="classify-title">
					深度保洁
				</view>
				<view class="classify-intro intro-deep">
					焕然一新
				</view>
				<view class="classify-img2">

				</view>
			</view>
			<view class="month mod">
				<view class="classify-title">
					做饭阿姨
				</view>
				<view class="classify-intro intro-month">
					平台严选
				</view>
				<view class="classify-img3">

				</view>
			</view>
			<view class="care mod">
				<view class="classify-title">
					洗抽油烟机
				</view>
				<view class="classify-intro intro-care">
					115元/台起
				</view>
				<view class="classify-img4">

				</view>
			</view>
		</view>
		<view class="job-classify iconfont flex wrap">
			<view class="job-mod">
				<view class="blue">
					&#xe622;
				</view>
				<view class="job-mod-title">
					保洁清洗
				</view>
			</view>
			<view class="job-mod">
				<view class="red">
					&#xe714;
				</view>
				<view class="job-mod-title">
					放心搬家
				</view>
			</view>
			<view class="job-mod">
				<view class="blue">
					&#xe611;
				</view>
				<view class="job-mod-title">
					房屋维修
				</view>
			</view>
			<view class="job-mod">
				<view class="green">
					&#xe603;
				</view>
				<view class="job-mod-title">
					擦玻璃
				</view>
			</view>
			<view class="job-mod">
				<view class="blue">
					&#xe63c;
				</view>
				<view class="job-mod-title">
					管道疏通
				</view>
			</view>
			<view class="job-mod">
				<view class="red">
					&#xe688;
				</view>
				<view class="job-mod-title">
					上门安装
				</view>
			</view>
			<view class="job-mod">
				<view class="green">
					&#xe60c;
				</view>
				<view class="job-mod-title">
					冰箱清洗
				</view>
			</view>
			<view class="job-mod">
				<view class="red">
					&#xe643;
				</view>
				<view class="job-mod-title">
					保姆月嫂
				</view>
			</view>
			<view class="job-mod">
				<view class="blue">
					&#xe666;
				</view>
				<view class="job-mod-title">
					洗衣洗鞋
				</view>
			</view>
			<view class="job-mod">
				<view class="green">
					&#xe60f;
				</view>
				<view class="job-mod-title">
					家电维修
				</view>
			</view>
		</view>
		<view class="index-banner wrap">
			<view class="banner-img">

			</view>
		</view>
		<view class="wrap i-banner">
			<view class="i-banner-wrap flex">
				<view class="flex banner-mod">
					<view class="">
						<view class="banner-title">
							超值套餐
						</view>
						<view class="flex">
							<view class="banner-title-intro">
								限时立减
							</view>
							<view class="banner-title-icon1">
								&#xeb22;
							</view>
						</view>
					</view>
					<view class="banner1">

					</view>
				</view>
				<view class="flex banner-mod">
					<view class="">
						<view class="banner-title">
							定时保洁
						</view>
						<view class="flex">
							<view class="banner-title-intro">
								最高省216
							</view>
							<view class="banner-title-icon2">
								&#xeb22;
							</view>
						</view>
					</view>
					<view class="banner2">

					</view>
				</view>
				<view class="flex banner-mod">
					<view class="">
						<view class="banner-title">
							特惠券包
						</view>
						<view class="flex">
							<view class="banner-title-intro">
								6.6元起
							</view>
							<view class="banner-title-icon3">
								&#xeb22;
							</view>
						</view>
					</view>
					<view class="banner3">

					</view>
				</view>
				<view class="flex banner-mod">
					<view class="">
						<view class="banner-title">
							领38元现金
						</view>
						<view class="flex">
							<view class="banner-title-intro">
								邀2人立得
							</view>
							<view class="banner-title-icon4">
								&#xeb22;
							</view>
						</view>
					</view>
					<view class="banner4">

					</view>
				</view>
			</view>
		</view>
		<view class="broadcast iconfont wrap">
			<text class="color broad-icon">&#xe610;</text>
			<text class="color">商品展示的划横线价格为市场参考价</text>
		</view>
		<view class="index-footer width">
			<view class="index-footer-nav">
				<view class="footer-father width" :class="{footerFatherFixed:isTop==1}" >
					<view class="footer-title-box">
						<view class="f-title-item" v-for="item,index in opctionData" :key="item.id" @click="itemClick(index)">
							<view :class="{color:index==num}">
								{{item.title}}
							</view>
							<view class="f-title-intro">
								{{item.intro}}
							</view>
							<view class="" v-if="index==num">
								<image src="../../static/opc-icon.png" alt="" class="opction-img"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view>
				<view class="opction-mod wrap" v-for="item,i in opctionData[index].children" :key="item.id">
					<view class="opction-pad">
						<view class="flex width content-top">
							<view class="float">
								{{item.tag}}
							</view>
							<image :src="item.imgURL" mode="" class="opction-imgURL"></image>
							<view class="opc-r-box hight flex">
								<view class="opc-r-top width">
									<image :src="item.opcURL" mode="" class="opction-opcURL width hight"></image>
								</view>
								<image :src="item.opc2URL" mode="" class="opction-opc2URL width"></image>
							</view>
						</view>
						<view class="flex width opc-bottom">
							<view class="opc-mod-bottom">
								<view class="">
									<text class="opc-mod-tag" :class="{opcModTagFlag:item.after.flag}">{{item.after.tag}}</text>
									<text class="opc-mod-title">{{item.title}}</text>
								</view>
								<view class="opc-mod-basic" v-if="item.ticket==''">
									<text>{{item.ticket}}</text>
									<text class="red opc-price">{{item.price.price}}</text>
									<text class="opc-price-limit">{{item.price.limit}}</text>
									<text>{{item.delPrice}}</text>
									<text class="opc-mod-subPrice subPrice" v-show="item.subPrice.flag" >{{item.subPrice.intro}}<text class="opc-mod-shade" ></text><text>{{item.subPrice.intro2}}</text></text>
								</view>
								<view class="opc-mod-basic" v-else>
									<text class="opc-mod-ticket">{{item.ticket}}</text>
									<text class="opc-mod-price">
										<text>{{item.price.price}}</text>
										<text class="opc-price-limit">{{item.price.limit}}</text>
									</text>
									<text class="opc-mod-delPrice">{{item.delPrice}}</text>
									<view class="opc-mod-subPrice">
										<text>{{item.subPrice.intro}}<text class="opc-mod-shade"></text><text>{{item.subPrice.intro2}}</text></text>
									</view>
								</view>
							</view>
							<view class="flex">
								<text class="opc-mod-shop">立即抢购</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {opctionData} from "./index.js"
	export default {
		name: 'index',
		data() {
			return {
				index: 0,
				num: 0,
				isTop: 0,
				myScrol:0,
				opctionData:opctionData
			}
		},
		mounted() {
		const query = uni.createSelectorQuery().in(this);
		query.select('.footer-father').boundingClientRect(data => {	
		this.myScroll = data.top - 12
		}).exec();
		},
		onPageScroll(e) {
				if(e.scrollTop >= this.myScroll){
				this.isTop = 1
				}else{
				this.isTop = 0
				}
			},
		methods: {
			itemClick(index) {
				this.num = index
				this.index = index
			},
			dayClick() {
				 uni.navigateTo({
				            url:"/pages/detail/DetailItem?id=1&title=日常保洁"				
				        })
			}
		}
	}
</script>

<style lang="scss">

</style>
